<template>
  <div class="dashboard-editor-container">
    <div>
      <el-cascader
        v-model="value"
        placeholder="请选择你的待办"
        :options="options"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"
      />
      <div style="float:right"><el-button type="primary">搜索</el-button></div>
      <div style="width:450px;float:right;margin-right:16px;">
        <el-input
          slot="prefix"
          v-model="input"
          placeholder="请输入搜索内容"
          clearable
        />
      </div>
      <div style="float:right;margin-right:16px;"><el-button type="primary">按优先级排序</el-button></div>
      <div style="float:right;margin-right:16px;"><el-button type="primary">按更新时间排序</el-button></div>
    </div>
    <div style="margin-top:16px">
      <todo-list />
    </div>
  </div>
</template>

<script>
import TodoList from './components/TodoList'

export default {
  name: 'DashboardAdmin',
  components: {
    TodoList
  },
  data() {
    return {
      input: '',
      value: [],
      options: [{
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
      console.log(this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
</style>
